<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div class="user-info">
                        <img src="../../../assets/img/img.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{name}}</div>
                            <div>{{role}}</div>
                        </div>
                    </div>
                </el-card>
                <el-card shadow="hover" style="height:287px;">
                    <div slot="header" class="clearfix">
                        <span>我的待办事项</span>
                        <el-button style="float: right; padding: 3px 0" type="text"  @click="Jumpmydb" >更多</el-button>
                    </div>
                    <el-row :gutter="20" class="mgb20">
                        <el-table
                                :data="forms"
                                style="width: 100%">
                            <el-table-column
                                    label="审批流程名称"
                                    prop="flowName">
                            </el-table-column>
                            <el-table-column
                                    label="审批发起时间"
                                    prop="createdate">
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <!--Vue<el-progress :percentage="71.3" color="#42b983"></el-progress>-->
                    <!--axios<el-progress :percentage="24.1" color="#f1e05a"></el-progress>-->
                    <!--CSS<el-progress :percentage="13.7"></el-progress>-->
                    <!--HTML<el-progress :percentage="5.9" color="#f56c6c"></el-progress>-->
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card shadow="hover" style="height:560px;width: 100%;">
                    <el-calendar></el-calendar>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover" style="height: 385px;">
                    <div slot="header" class="clearfix">
                        <span>公告</span>
                        <el-button style="float: right; padding: 3px 0" type="text"  @click="Jumpmygg" >更多</el-button>
                    </div>
                    <el-table
                            :data="admnotices"
                            style="width: 100%">
                        <el-table-column
                                label="公告名称"
                                prop="title">
                        </el-table-column>
                        <el-table-column
                                label="发布时间"
                                prop="noticeReleasetime">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" style="height: 385px;">
                    <div slot="header" class="clearfix">
                        <span>我的申请</span>
                        <el-button style="float: right; padding: 3px 0" type="text"  @click="Jumpmysq" >更多</el-button>
                    </div>
                    <el-table
                            :data="Mysqforms"
                            style="width: 100%">
                        <el-table-column
                                label="流程名称"
                                prop="flowName">
                        </el-table-column>
                        <el-table-column
                                label="提交时间"
                                prop="createdate">
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <handle @back="back" @completed="completed" :row="rows" v-if="active==2"></handle>
    </div>
</template>

<script>
import FormService from '../../../model/mfy/form/FormService.js';
var formService=FormService.getInstance();

import Admnotice from '../../../model/gsl/AdmNotice/admnotice.js';
var admnotice=Admnotice.getInstance();
export default {
    name: 'dashboard',
    data() {
        return {
            active:1,
            name: sessionStorage.getItem("realName"),
            role: sessionStorage.getItem("roles"),
            forms: [],
            admnotices:[],
            Mysqforms:[],
            rows:{},
        };
    },
    components: {
    },
    created() {
        this.selectMybacklog();
        this.selectMysq();
        this.gonggao();
    },
    methods: {
        selectMybacklog(){
            formService.selectMybacklog(null).then((response=>{
                this.forms=response.data.data.records;
            }))
        },
        Jumpmydb(){
            this.$router.push({name:"dbsx"})
        },
        Jumpmysq(){
            this.$router.push({name:"sq"})
        },
        Jumpmygg(){
            this.$router.push({name:"gg"})
        },
        selectMysq(){
            formService.zhuyedeshenqing().then((response=>{
                var a =response.data.data
                var b =[];
                if(a.length<=5){
                    b = a
                }else{
                    for(var i=0;i<5;i++){
                        b.push(a[i]);
                    }
                }
                this.Mysqforms=b
            }))
        },
        gonggao(){
            admnotice.list(null).then((response=>{
                var a =response.data.data
                var b =[];
                if(a.length<=5){
                    b = a
                }else{
                    for(var i=0;i<5;i++){
                        b.push(a[i]);
                    }
                }
                this.admnotices=b;
            }))
        }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
